<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传与展示</title>
    <!-- 引入 Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9fafb;
            color: #333;
        }
        h1 {
            text-align: center;
            margin-top: 20px;
            font-weight: 700;
            color: #2d3748;
        }
        .upload-section {
            text-align: center;
            margin: 20px 0;
        }
        .upload-section input[type="file"] {
            display: none;
        }
        .upload-section label {
            display: inline-block;
            padding: 10px 20px;
            background: linear-gradient(90deg, #2454c4, #818cf8);
            color: white;
            font-weight: 500;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.2s ease-in-out;
        }
        .upload-section label:hover {
            transform: scale(1.05);
        }
        .upload-section button {
            margin-left: 10px;
            padding: 10px 20px;
            background: linear-gradient(90deg, #ef4444, #f87171);
            color: white;
            font-weight: 500;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.2s ease-in-out;
        }
        .upload-section button:hover {
            transform: scale(1.05);
        }
        .image-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            padding: 20px;
        }
        .image-item {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.2s ease-in-out;
        }
        .image-item:hover {
            transform: translateY(-5px);
        }
        .image-item img {
            width: 100%;
            height: auto;
            display: block;
        }
        .loading {
            text-align: center;
            margin-top: 20px;
            font-size: 18px;
            color: #64748b;
        }
        .loading::after {
            content: ".";
            animation: loadingDots 1.5s infinite;
        }
        @keyframes loadingDots {
            0%, 20% {
                content: ".";
            }
            40%, 60% {
                content: "..";
            }
            80%, 100% {
                content: "...";
            }
        }
    </style>
</head>
<body>
<h1>图片上传与展示</h1>

<!-- 图片上传表单 -->
<div class="upload-section">
    <label for="file-input">选择图片</label>
    <input type="file" id="file-input" accept="image/*">
    <button onclick="uploadImage()">上传图片</button>
</div>

<!-- 加载提示 -->
<div id="loading" class="loading" style="display: none;">加载中</div>

<!-- 图片展示区域 -->
<div id="image-list" class="image-container"></div>

<script>
    // 获取图片列表并展示
    async function fetchImages() {
        try {
            document.getElementById('loading').style.display = 'block'; // 显示加载动画
            const response = await fetch('http://192.168.41.19:8083/api/files/list');
            if (!response.ok) {
                throw new Error('无法获取图片列表');
            }

            const files = await response.json();
            const imageListContainer = document.getElementById('image-list');

            // 清空容器
            imageListContainer.innerHTML = '';

            // 假设上传目录为 /uploads/
            const uploadBasePath = 'http://192.168.41.19:8083/uploads/';

            // 遍历文件列表，筛选图片文件并展示
            let hasImages = false; // 标记是否有图片
            files.forEach(file => {
                // 简单判断是否为图片（根据文件扩展名）
                const isImage = /\.(jpg|jpeg|png|gif|bmp)$/i.test(file);
                if (isImage) {
                    hasImages = true;

                    // 提取文件名
                    const fileName = file.split('\\').pop(); // Windows 路径分隔符

                    // 构造图片 URL
                    const imagePath = `${uploadBasePath}${fileName}`;

                    // 创建图片项
                    const imageItem = `
                        <div class="image-item">
                            <img src="${imagePath}" alt="图片">
                        </div>
                    `;
                    imageListContainer.innerHTML += imageItem;
                }
            });

            // 如果没有图片
            if (!hasImages) {
                imageListContainer.innerHTML = '<p style="text-align: center; color: #64748b;">暂无图片可展示。</p>';
            }
        } catch (error) {
            console.error(error);
            document.getElementById('image-list').innerHTML = '<p style="text-align: center; color: #ef4444;">加载图片列表失败，请稍后重试。</p>';
        } finally {
            document.getElementById('loading').style.display = 'none'; // 隐藏加载动画
        }
    }

    // 上传图片
    async function uploadImage() {
        const fileInput = document.getElementById('file-input');
        const file = fileInput.files[0];

        if (!file) {
            alert('请选择一张图片进行上传！');
            return;
        }

        // 检查文件类型
        const isImage = /\.(jpg|jpeg|png|gif|bmp)$/i.test(file.name);
        if (!isImage) {
            alert('只能上传图片文件！');
            return;
        }

        // 创建 FormData 对象
        const formData = new FormData();
        formData.append('file', file);

        try {
            document.getElementById('loading').style.display = 'block'; // 显示加载动画
            const response = await fetch('http://192.168.41.19:8083/upload', {
                method: 'POST',
                body: formData
            });

            if (!response.ok) {
                throw new Error('图片上传失败');
            }

            const result = await response.text();
            alert(result); // 显示上传结果
            fetchImages(); // 刷新图片列表
            fileInput.value = ''; // 清空文件输入框
        } catch (error) {
            console.error(error);
            alert('图片上传失败，请稍后重试。');
        } finally {
            document.getElementById('loading').style.display = 'none'; // 隐藏加载动画
        }
    }

    // 页面加载时调用
    window.onload = fetchImages;
</script>
</body>
</html>